<template>
  <div class="browsing">
    <el-row>
      <el-col :span="4">
        <el-input style="width: 240px;" v-model="records.orderNo" placeholder="订单号" />
      </el-col>
      <el-col :span="4">
        <el-select v-model="records.money" class="m-2" placeholder="支付方式" style="width: 240px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button color="#6675FF" :icon="Search" @click="timeclick">查询</el-button>
      </el-col>
    </el-row>
    <div style="margin: 30px 0;">
      <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ color: '#333' }">
        <el-table-column prop="date" label="订单号" align="center" />
        <el-table-column prop="name" label="数量" align="center" />
        <el-table-column prop="name" label="单位" align="center" />
        <el-table-column prop="date" label="支付方式" align="center" />
        <el-table-column prop="date" label="付款金额" align="center" />
        <el-table-column prop="name" label="优惠金额" align="center" />
        <el-table-column prop="name" label="创建时间" align="center" />
        <el-table-column prop="date" label="会员等级" align="center" />
      </el-table>
    </div>
    <Pagination ref="pagination" :talet="talet" />
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import Pagination from './pagination/index.vue'
import { ref, reactive } from "vue";
let talet = ref('')
let pagination = ref()
let records = reactive({
  orderNo: '',
  money: ''
})
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

// 支付方式
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

const timeclick = () => {
  // pagination.value.currentPage
  // pagination.value.pageSize
}
</script>

<style lang="scss" scoped>
.browsing {
  height: 780px;
  padding: 20px;
  background-color: #fff;
}

.el-button {
  width: 90px;
  height: 36px;
  color: #fff;
}
</style>
